/*
 * @Description: 新增工单收索部分
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-04-02 13:57:01
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-04 17:57:53
 */
import React, { useState } from 'react';
import { Form, Input, Button, Col, Row } from 'antd';
import {
    SearchOutlined,
    ZoomOutOutlined
} from '@ant-design/icons';

import AdvancedSearch from './advancedSearch'
import './index.css'
// import '../../../button.css'
import '../../../button.css'
const Search = () => {
    const [show, setShow] = useState(true)
    function showHideHeadle() {
        show ? setShow(false) : setShow(true)
        console.log(show);
    }
    return (
        <>
            {/* addorder-sear-hide */}
            <div className={show ===false? 'addorder-sear-hide' : 'addorder-sear'}>
                {/* 低级收索 */}
                <Form name="search" labelCol={{ span: 24 }}  >
                    <Row className='addorder-row'>
                        <Col span={5} offset={8}>
                            <Form.Item name="username" wrapperCol={{ span: 24 }} labelAlign="right">
                                <Input size={'small'} placeholder={'客户名称、联系人、手机号码'} />
                            </Form.Item>
                        </Col>
                        <Col>
                            <Form.Item labelAlign="right" wrapperCol={{ span: 24 }}>
                                &nbsp;<Button type="primary" className='btn-bgc-5' size={'small'}> Submit</Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                {/* 隐藏显示高级收索按钮 */}
                <div className='addorder-show'>
                    <div>
                        <Button className='btn-bgc-6' onClick={showHideHeadle}><SearchOutlined className='addorder-showIcon' />展开高级收索</Button>
                    </div>
                </div>
            </div>
            {/* 高级收索 */}
            <div className={show ? 'AdvancedSearch-box-ctrl' : 'AdvancedSearch-box-ctrl1'}>
                <div className='AdvancedSearch-box'>
                    <AdvancedSearch />
                </div>
                {/* 隐藏显示高级收索按钮 */}
                <div className='addorder-show1'>
                    <div>
                        <Button className='btn-bgc-6' onClick={showHideHeadle}><ZoomOutOutlined className='addorder-showIcon' />关闭高级收索</Button>
                    </div>
                </div>
            </div>
        </>

    );
}

export default Search;
